<template>
  <div>
    <headers :head_title="head_title" />
    <main>
      <div class="clinical_box">
        <p><span class="text">文字评价</span><span class="h6">(送H币)</span></p>
        <div>
          <textarea
            v-model="comment"
            placeholder="请输入您对医生的评价"
            :maxlength="maxLength"
            @input="updateCharacterCount"
            class="clinical_textarea"
          ></textarea>
        </div>
      </div>
      <p class="link"></p>
      <div class="service_boxx">
        <p><span class="text">星级评价</span></p>
        <div class="service_boxs">
          <p>
            医生专业度
            <van-rate
              v-model="value1"
              :size="35"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
              class="service_satisfaction"
            />
          </p>
          <p>
            服务满意度
            <van-rate
              v-model="value"
              :size="35"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
              class="service_satisfaction"
            />
          </p>
        </div>
      </div>
      <p class="link"></p>
      <div class="service_button">
        <van-button type="primary" color="#ccc" class="back" @click="back">返回</van-button>
        <button class="back" @click="submitComment" :disabled="isFormInvalid">提交评论</button>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import headers from '@/components/header.vue'
import { ref, computed } from 'vue'
import {useRouter,useRoute} from 'vue-router'
import { usecurrentStore } from '@/stores/my_Store'
import { showNotify } from 'vant'
const userId = ref(sessionStorage.getItem('userId'))
const sessionid = ref(sessionStorage.getItem('sessionid'))
const store:any = usecurrentStore()
const router = useRouter()
const route = useRoute()
const head_title = ref('评价问诊服务')
const maxLength = ref(200)
// 星级
const value1 = ref(1)
const value = ref(2)
// 评论内容的响应式数据
const comment = ref('')
console.log(comment);

// 标记是否已提交评论
const submitted = ref(false)
// 提交评论后的消息
const submittedMessage = ref('')
// 表单是否无效（评论为空）
const isFormInvalid = computed(() => comment.value === '')
const { recordId, doctorId } = route.query
const updateCharacterCount = () => {
  if (comment.value.length > maxLength.value) {
    comment.value = comment.value.slice(0, maxLength.value)
  }
}
const back = () => {
  router.go(-1)
}

const submitComment = () => {

  if (comment.value) {
    // 这里可以添加实际的提交评论逻辑，比如发送请求到服务器
    console.log('提交评论：', comment.value)
    submitted.value = true
    addfiles()
    comment.value = ''
    router.push('/chinical_money')
  }
}
const addfiles=async()=>{
   try {
    const userId = store.userId
    const sessionId = store.sessionId
    const evaluate = comment.value
    const majorDegree = value1.value
    const satisfactionDegree = value.value
    await store.handPingdata(
      userId,
      sessionId,
      Number(recordId),
      Number(doctorId),
      evaluate,
      majorDegree,
      satisfactionDegree
    )
    if (store.pingListResults && store.pingListResults.status === '0000') {
      showNotify({ type: 'success', message: '评价成功' })
      router.push({
        path: '/evaluation_results',
        query: { recordId }
      })
    } else {
      showNotify({ type: 'danger', message: '亲，不能重复评论' })
    }
  } catch (error) {
    console.error('提交评论失败', error)
  }
  const history=[
    {
      // 内容
      list:comment.value,
      majorDegree:value1.value,
      satisfaction:value.value,
    }
  ]
  localStorage.setItem('history',JSON.stringify(history))
  console.log(history)
}


</script>

<style scoped>
main {
  width: 100%;
  /* margin: 20px; */
  font-size: 16px;
}
.h6 {
  font-size: 12px;
  margin-left: 10px;
}
.text {
  padding-left: 10px;
  border-left: 4px solid #368beb;
}
.clinical_box{
  width: 85%;
  margin: 0 auto;
}
.back{
  color: #fff;
  width: 24%;
  font-size: 15px;
  border-radius: 10px;
  background: #3087ea;
}

.service_boxx{
  margin: 0 auto;
  width: 85%;
}

.clinical_textarea {
  width: 95%;
  height: 170px;
  border: none;
}
.service_satisfaction{
  margin-left: 10px;
}

.service_boxs{
  font-size: 13px;
}
.link{
 border: 1px solid #eee;
}
.service_button{
  padding-top: 80px;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
</style>
